<script setup>
import { ref } from 'vue'
// 原数组
const data = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202204191820_88e1f0fded3b4f05c5bdecf433a868cf.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi Turbo 3',
    tname: '性能旋风,席卷而来',
    sname: '1799元起',
    delname: '1999元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/adce4500b997efaf6e3ff8e8150215f4.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi Civi 4 Pro',
    tname: '光学Summilux镜头|5000万像素',
    sname: '2799元起'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e7c6e79433c883e1a022ec21402c1679.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi 14 Ultra',
    tname: '全明星四摄|双向卫星通信',
    sname: '5999元起'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8b619d27877bbc497468c673a317a847.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  }
])
const List = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/86c3f61639ae6a2a9a205a463d338ed2.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi Turbo 3',
    tname: '性能旋风,席卷而来',
    sname: '1799元起',
    delname: '1999元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9946e252a7c49662376c056ced004a20.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi Civi 4 Pro',
    tname: '光学Summilux镜头|5000万像素',
    sname: '2799元起'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e13900c094ae4ac4eb53b35f2d0c95b0.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi 14 Ultra',
    tname: '全明星四摄|双向卫星通信',
    sname: '5999元起'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/49f30069c778b494257320d9da5a1a60.jpg?thumb=1&w=100&h=100&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  }
])
// 第二个按钮的数据
const OneData = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5c7cb198d71ee962b38a45aa03515341.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/47332a26f2d1ad4bd7c9718cf0a6d2df.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202211211109_d63346a774343f931149daadffa9f24e.png',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202307251413_a0f9d17e76eeb4ebe442678dcb48206c.png',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  }
])
const OneDatas = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202401191118_d6ae8f07f3709437e110f8addf2162ff.png',
    oname: 'Redmi Turbo 3',
    tname: '性能旋风,席卷而来',
    sname: '1799元起',
    delname: '1999元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202406061153_4f45dbf4c5405c2af01b93f5aba42d79.png',
    oname: 'Xiaomi Civi 4 Pro',
    tname: '光学Summilux镜头|5000万像素',
    sname: '2799元起'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202405061105_77ef8c7b71e27c3a72af96072db0631d.png',
    oname: 'Xiaomi 14 Ultra',
    tname: '全明星四摄|双向卫星通信',
    sname: '5999元起'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202212221000_404cece1c79adb8b880b4fc0d9125a19.png',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  }
])
// 第三个按钮的数据
const TowData = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/314df4955a5f305de306155078bb103d.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b11a222051f90dafb22b939cc5142e69.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c2af30d499323618f9abdaffd82b581b.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/33b734b0f427fd89ae293752ffaf4381.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  }
])
const TowDatas = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/500a840ec69f9ce885345e9a9471a9f9.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/07419ed5047471b60d0232c9d8a7d84f.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/11db80e3fcb3e186e5ea7078b0a1de5a.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4023ef3196d312cda144ecb768b91cdf.jpg?thumb=1&w=100&h=100&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  }
])
// 第四个按钮的数据
const forData = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/74f5975a77c6d9fcf67e294c47561994.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi Turbo 3',
    tname: '性能旋风,席卷而来',
    sname: '1799元起',
    delname: '1999元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/068940a89c1c35a9924cb64c762879fe.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi Civi 4 Pro',
    tname: '光学Summilux镜头|5000万像素',
    sname: '2799元起'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7fe0a1143670e2b37e4beb91c8b0d717.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi 14 Ultra',
    tname: '全明星四摄|双向卫星通信',
    sname: '5999元起'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0130f299091fff0d471720d9a6d3319f.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  }
])
const forDatas = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2bb58f6ea6660a2f4a24bfb5092fcac3.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi Turbo 3',
    tname: '性能旋风,席卷而来',
    sname: '1799元起',
    delname: '1999元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202205161530_acc36b04e6966fdf0143f8c6b7932a6c.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi Civi 4 Pro',
    tname: '光学Summilux镜头|5000万像素',
    sname: '2799元起'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202308031635_25822df375be098087de061a4800c594.png',
    oname: 'Xiaomi 14 Ultra',
    tname: '全明星四摄|双向卫星通信',
    sname: '5999元起'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202204191820_88e1f0fded3b4f05c5bdecf433a868cf.png',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  }
])
// 恢复的原来的数据
const serrData = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202204191820_88e1f0fded3b4f05c5bdecf433a868cf.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi Turbo 3',
    tname: '性能旋风,席卷而来',
    sname: '1799元起',
    delname: '1999元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/adce4500b997efaf6e3ff8e8150215f4.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi Civi 4 Pro',
    tname: '光学Summilux镜头|5000万像素',
    sname: '2799元起'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e7c6e79433c883e1a022ec21402c1679.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi 14 Ultra',
    tname: '全明星四摄|双向卫星通信',
    sname: '5999元起'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8b619d27877bbc497468c673a317a847.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  }
])
const serrDatas = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/86c3f61639ae6a2a9a205a463d338ed2.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi Turbo 3',
    tname: '性能旋风,席卷而来',
    sname: '1799元起',
    delname: '1999元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9946e252a7c49662376c056ced004a20.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi Civi 4 Pro',
    tname: '光学Summilux镜头|5000万像素',
    sname: '2799元起'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e13900c094ae4ac4eb53b35f2d0c95b0.jpg?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi 14 Ultra',
    tname: '全明星四摄|双向卫星通信',
    sname: '5999元起'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/49f30069c778b494257320d9da5a1a60.jpg?thumb=1&w=100&h=100&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  }
])
const addTv = () => {
  data.value = OneData.value
  List.value = OneDatas.value
}
const addKt = () => {
  data.value = TowData.value
  List.value = TowDatas.value
}
const addnice = () => {
  data.value = forData.value
  List.value = forDatas.value
}
const addHot = () => {
  data.value = serrData.value
  List.value = serrDatas.value
}
</script>
<template>
  <div style="margin-top: 80px">
    <div class="common-layout">
      <el-container>
        <el-header>
          <h1>智能家居</h1>
          <h1 style="text-align: center" class="more">
            <span class="One" @click="addHot">小爱音箱&nbsp;&nbsp;&nbsp;</span>
            <span class="Two" @click="addTv">门锁门铃&nbsp;&nbsp;&nbsp;</span>
            <span class="seer" @click="addKt">路由器&nbsp;&nbsp;&nbsp;</span>
            <span class="seer" @click="addnice">智能设备</span>
          </h1>
        </el-header>
        <el-container>
          <el-aside class="leftimg" width="234px">
            <img
              src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ec383d223d9f38f442268df684c526f6.png?thumb=1&w=234&h=300&f=webp&q=90"
            />
          </el-aside>
          <el-main>
            <div class="container">
              <div
                class="item"
                v-for="item in data"
                :key="item.id"
                style="width: 234px"
              >
                <img :src="item.src" class="image" style="width: 250px" />
                <div class="text">
                  <p class="one">{{ item.oname }}</p>
                  <p class="tow">{{ item.tname }}</p>
                  <p class="seer">
                    {{ item.sname }}&nbsp;
                    <del style="color: #b0b0b0">{{ item.delname }}</del>
                  </p>
                </div>
              </div>
            </div>
          </el-main>
        </el-container>
      </el-container>
      <el-container>
        <el-header> </el-header>
        <el-container>
          <el-aside class="leftimg" width="234px">
            <img
              src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/bb9761c5b49e21b4d5aa03e7ddaf1a09.png?thumb=1&w=234&h=300&f=webp&q=90"
            />
          </el-aside>
          <el-main>
            <div class="container">
              <div
                class="item"
                v-for="item in List"
                :key="item.id"
                style="width: 234px"
              >
                <img :src="item.src" class="image" style="width: 250px" />
                <div class="text">
                  <p class="one">{{ item.oname }}</p>
                  <p class="tow">{{ item.tname }}</p>
                  <p class="seer">
                    {{ item.sname }}&nbsp;
                    <del style="color: #b0b0b0">{{ item.delname }}</del>
                  </p>
                </div>
              </div>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>
<style scoped lang="scss">
.common-layout {
  overflow: hidden;
  width: 1500px;
  height: 750px;
  margin: 1px auto;
  .leftimg {
    transition: all 0.5s;
    img {
      width: 243px;
      height: 300px;
    }
    &:hover {
      cursor: pointer;
      transform: translate3d(0, -3px, 0);
      box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
    }
  }
  .el-header {
    display: flex;
    justify-content: space-between;
    .more {
      display: flex;
      align-items: center;
      .One {
        &:hover {
          cursor: pointer;
          color: #e26237;
        }
      }
      .Two {
        &:hover {
          cursor: pointer;
          color: #e26237;
        }
      }
      .seer {
        &:hover {
          cursor: pointer;
          color: #e26237;
        }
      }
    }
  }
  .el-main {
    padding: 0;
    .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .item {
        text-align: center;
        flex-basis: 25%;
        transition: all 0.5s;
        &:hover {
          cursor: pointer;
          transform: translate3d(0, -3px, 0);
          box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
        }
        .text {
          .one {
            font-size: 12px;
          }
          .tow {
            color: #b0b0b0;
          }
          .seer {
            color: #e26237;
          }
        }
      }
    }
  }
}
.common {
  overflow: hidden;
  width: 1500px;
  height: 725px;
  margin: 1px auto;
  .leftimg {
    transition: all 0.5s;
    img {
      width: 243px;
      height: 300px;
    }
    &:hover {
      cursor: pointer;
      transform: translate3d(0, -3px, 0);
      box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
    }
  }
  .el-header {
    display: flex;
    justify-content: space-between;
    .more {
      display: flex;
      align-items: center;
      .One {
        &:hover {
          cursor: pointer;
          color: #e26237;
        }
      }
      .Two {
        &:hover {
          cursor: pointer;
          color: #e26237;
        }
      }
      .seer {
        &:hover {
          cursor: pointer;
          color: #e26237;
        }
      }
    }
  }
  .el-main {
    padding: 0;
    .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .item {
        text-align: center;
        flex-basis: 25%;
        transition: all 0.5s;
        &:hover {
          cursor: pointer;
          transform: translate3d(0, -3px, 0);
          box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
        }
        .text {
          .one {
            font-size: 12px;
          }
          .tow {
            color: #b0b0b0;
          }
          .seer {
            color: #e26237;
          }
        }
      }
    }
  }
}
</style>
